<!-- 党费缴纳 -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="../../yl/index.css" />
  <link rel="stylesheet" href="../../style/index.css" />
  <link rel="stylesheet" href="../../component/pear/css/pear.css" />
  <link rel="stylesheet" href="../../admin/css/other/console1.css" />
  <title>党费信息</title>
  <style>
    .zz {
      transition: all 0.3s ease;
      font-size: 36px;
    }

    .layui-card:hover .zz {
      transform: scale(1.05);
      color: #fff;
    }

    .top {
      height: 120px;
      padding: 15px;

    }

    .layui-card-body {
      /* border: 1px solid red; */
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      height: calc(100% - 42px);
      /* 减去标题高度 */
      /* text-align: center; */

    }

    .sz {

      /* border: 1px solid black; */
      position: relative;
      height: 42px;
      line-height: 42px;
      color: rgba(255, 255, 255, 1);
      font-size: 20px;
      padding: 0 15px;
      border-radius: 2px 2px 0 0;
      text-align: center;
    }

    .zz {
      width: 120px;
      color: rgba(255, 255, 255, 1);
      font-size: 15px;
      text-align: center;
      /* display: flex; */
      justify-content: center;
      align-items: center;
      height: 100%;
    }

    .layui-card {
      /* height: 120px; */
      /* border: 1px solid red; */
      /* 添加一个小手 */
      cursor: pointer
        /* 点击那个怎么一个阴影方便我知道我选中那个 */
    }

    .layui-card.selected {

      /* border: 2px solid #d31805; */
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.6);
    }

    .el-form-item {
      margin-bottom: 0;
    }
  </style>
</head>

<body>
  <div id="app" v-cloak>
    <div class="title" style="margin:0 10px;">
      <div style="padding: 5px;">
        查询年度&nbsp;&nbsp;
        <el-date-picker v-model="selectedYear" value-format="YYYY" type="year" placeholder="选择年度"
          style="margin-right: 10px;"></el-date-picker>
      </div>
    </div>

    <div class="body">

      <div class="right">
        <div style="display: flex;width: 100%;height: 100%; flex-wrap: wrap;">
          <div v-for="i in 12" :key="i"
            style="width: calc((100% - 50px) / 4);height: calc((100% - 40px) / 3);margin: 10px 0 0 10px;">
            <div class="layui-card top-panel" style="display: flex;flex-direction: column;"
              :style="{backgroundColor:monthColors[i-1],height:'100%'}">
              <div
                style="flex-shrink: 0; height: 50%;display: flex; align-items: center;justify-content: center; color: #fff; font-size: 34px;">
                {{i}}月</div>
              <div class="layui-card-body" style="height: 50%;width: 100%;">
                <div class="zz" id="value1" style="display: flex;justify-content: space-between; width: 100%;">
                  <div style="width: 100%;font-size: 24px;">
                    <div>党员</div>
                    <span style="font-size: 18px;">
                      {{ResultQty[i-1]}} / {{total.PartyMember }}
                    </span>
                  </div>
                  <el-divider direction="vertical"></el-divider>
                  <div style="width: 100%;font-size: 24px;">
                    <div>党组织</div>
                    <span :style="{ 'font-size': '18px'}">
                      {{ResultOrg[i-1]}} / {{total.PartyOrganization }}
                    </span>
                  </div>
                </div>

              </div>
            </div>
          </div>
          
        </div>


      </div>
    </div>

    <!-- -->
  </div>
  </div>
  <script src="../../utils/utils.js"></script>
  <script src="../../config/config.js"></script>
  <script src="../../utils/mixins.js"></script>
  <script src="../../yl/vue.js"></script>
  <script src="../../yl/index.js"></script>
  <script src="../../yl/zh-cn.mjs"></script>
  <script src="../../yl/index.iife.min.js"></script>
  <script src="../../yl/jquery.min.js"></script>
  <script src="../../utils/jquery.cookie.js"></script>
  <script src="../../api/request.js"></script>
  <script src="./js/party_fees.js"></script>
</body>

</html>